layui.use(['table','common'], function(){
    var table = layui.table;
    var $ = layui.jquery;
    var common=layui.common;
    var reportId=$("input[name='reportId']").val();

    /**
     * 初始化加载
     */
    function init() {


       /* var myChart2 = echarts.init(document.getElementById('main2'));

        myChart2.setOption(option2);

        var myChart3 = echarts.init(document.getElementById('main3'));
        var option3 = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart3.setOption(option3);*/
        //1.读取布局
       common.post("/business/busiReport/reportChartListByReportId",{reportId:reportId},function (res) {
           var view=$("#report_view");
           //view.empty();
           $.each(res,function (i,item) {
               var showPosition=item.showPosition;
               var md=parseInt(showPosition)*4;
               var md_class="layui-col-md"+md;
               var viewId="view"+item.chartId;
               view.append('<div class="'+md_class+'"><div class="layui-card"><div class="layui-card-header">'+item.chartName+'</div><div class="layui-card-body" id="'+viewId+'"></div></div></div>');
               //判断类型
               switch (item.chartType){
                   case 'table':
                       tableRender(viewId,item);
                       break;
                   case 'line':
                       lineRender(viewId,item);
                       break;
                   case 'pie':
                       pieRender(viewId,item);
                       break;
                   case 'bar':
                       barRender(viewId,item);
                       break;
                   default:
                       break
               }

           })
       })
       //2.加载各指标项
    }

    /**
     * 表格数据渲染
     * @param viewId
     * @param data
     */
    function tableRender(viewId,data) {
        var reportDataId="reportData"+viewId;
        $("#"+viewId).append('<table class="layui-hide" id="'+reportDataId+'" lay-filter="reportData"></table>');
        var columns=[{type:'checkbox'}];
        var reportColumns=JSON.parse(data.reportMapper);
        for(var o in reportColumns){
            var obj={};
            obj.field=o;
            obj.title=reportColumns[o];
            columns.push(obj);
        }
        //渲染table
        table.render({
            elem: '#'+reportDataId
            ,url:'/business/busiReport/reportChartDataById?chartId='+data.chartId
            ,cols: [columns]
            ,page: true
        });
    }

    /**
     * 折线图渲染
     * @param viewId
     * @param data
     */
    function lineRender(viewId,data) {
        var chartViewId="chartView"+viewId;
        $("#"+viewId).append('<div id="'+chartViewId+'"></div>');
        var width=$("#"+viewId).width();
        //取得参数配置
        var chartParams=JSON.parse(data.chartParams);
        $("#"+chartViewId).css({"width":width,height: chartParams.height});
        var myChart = echarts.init(document.getElementById(chartViewId));
        //取得数据
        common.post("/business/busiReport/reportChartDataById",{chartId:data.chartId},function (res) {
            var xAxisData=[],seriesData=[];
            $.each(res,function (i,item) {
                xAxisData.push(item.name);
                seriesData.push(item.value);
            });
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top:'3%',
                    left: '3%',
                    right: '3%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    }
                },
                series: [{
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 136, 212, 0.8)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 136, 212, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(0,136,212)',
                            borderColor: 'rgba(0,136,212,0.2)',
                            borderWidth: 12

                        }
                    }
                }]
            };
            myChart.setOption(option);
        });
    }


    /**
     * 饼图渲染
     * @param viewId
     * @param data
     */
    function pieRender(viewId,data) {
        var chartViewId="chartView"+viewId;
        $("#"+viewId).append('<div id="'+chartViewId+'"></div>');
        var width=$("#"+viewId).width();
        //取得参数配置
        var chartParams=JSON.parse(data.chartParams);
        $("#"+chartViewId).css({"width":width,height: chartParams.height});
        var myChart = echarts.init(document.getElementById(chartViewId));
        //取得数据
        common.post("/business/busiReport/reportChartDataById",{chartId:data.chartId},function (res) {
            var legendData=[],seriesData=[];
            $.each(res,function (i,item) {
                legendData.push(item.name);
                var obj={};
                obj.name=item.name;
                obj.value=item.value;
                seriesData.push(obj);
            });
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: legendData
                },
                series : [
                    {
                        name: data.chartName,
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        });
    }

    /**
     * 柱状图
     * @param viewId
     * @param data
     */
    function barRender(viewId,data) {
        var chartViewId="chartView"+viewId;
        $("#"+viewId).append('<div id="'+chartViewId+'"></div>');
        var width=$("#"+viewId).width();
        //取得参数配置
        var chartParams=JSON.parse(data.chartParams);
        $("#"+chartViewId).css({"width":width,height: chartParams.height});
        var myChart = echarts.init(document.getElementById(chartViewId));
        //取得数据
        common.post("/business/busiReport/reportChartDataById",{chartId:data.chartId},function (res) {
            var xAxisData=[],seriesData=[];
            $.each(res,function (i,item) {
                xAxisData.push(item.name);
                seriesData.push(item.value);
            });
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top:'3%',
                    left: '3%',
                    right: '3%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    lineStyle: {
                        color: '#666'
                    }
                },
                yAxis: {
                    type: 'value',
                    lineStyle: {
                        color: '#666'
                    }
                },
                series: [{
                    data: seriesData,
                    type: 'bar'
                }]
            };
            myChart.setOption(option);
        });
    }
    init();
});